<template>
	<div class="mb-1">操作记录</div>
	<div class="tree" v-for="(item,index) in data" :key="index">
		<div class="mb-1" @click="ontab(index,item.show)">
			<el-icon :size="14" color="#999">
				<CaretBottom v-if="item.show&&item.children.length!=0" />
				<CaretRight v-if="!item.show&&item.children.length!=0" />
			</el-icon>
			{{item.create_time}}, 由 <span class="font">{{item.user_name}}</span> {{item.summary}}。
		</div>
		<div class="tree-m" v-if="item.show">
			<div class="mb-1 ml-3" v-for="(it,i) in item.children" :key="i">
				<span>
					<span>{{it.summary||it.name}}</span>
					<span class="font">{{it.title||it.name}}</span>
					<span class="font" v-if="it.compare_value">{{it.compare_value}}</span>
					<span style="margin-left: 5px;" v-if="it.display">旧值为 “{{it.old||'空'}}”, 新值为
						“{{it.new||'空'}}”</span>
					<span>。</span>
				</span>
			</div>
		</div>
	</div>
</template>

<script lang="ts" setup>
	const props = defineProps({
		data: {
			type: [String, Array],
			default: () => []
		},
	})
	const ontab = (i: any, show: any) => {
		props.data[i].show = !show
	}
</script>

<style>
	.tree-m {
		padding: 0 20px;
	}

	.font {
		font-weight: 600;
		margin-left: 5px;
		/* margin-right: 5px; */
	}
</style>
